import React, {Fragment } from 'react'
import { SlackOutlined,UserOutlined,LogoutOutlined} from '@ant-design/icons'
import { Modal} from 'antd';
import './index.css'
import { useNavigate } from 'react-router-dom'
import{getLogin,LoginOut} from '../../common/Auth.js'
export default function Top(){
  let loginUser=getLogin()
  let to = useNavigate()
  function handLogin(){
    Modal.confirm({
      title: '提示',
      content: '你确定要退出吗？',
      okText: '确认',
      cancelText: '取消',
      onOk:()=>{
        LoginOut()
        to('/')   
      }
    });
  }
  return (
    <Fragment>
      <div className='logoWrap'>
          <h1 style={{color:'#fff',fontSize:'30px'}}>
            <SlackOutlined />
            南客后台管理系统
          </h1>
      </div>
      <div className='userWarp'>
        <div className='btn-group'>
          <UserOutlined />
          {loginUser}
        </div>
        <div className='btn-group' onClick={handLogin}>
          <LogoutOutlined />
          登入
        </div>
      </div>
    </Fragment>
  )
}
